<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group Example</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
    <style type="text/css">
      #result tt {
        color: maroon;
        font-size: 1.1em;
      }
      form>div {
        margin-top: 0.9em;
      }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#testButton').click(function(){
          var checkedValue = $('[name="someRadioGroup"]:radio:checked').val();
          $('#result').html('The radio element with value <tt>' + checkedValue + '</tt> is checked.');
        });
      });
    </script>
  </head>
  <body>

    <form>
      <div>
        <label for="radioYes">What is your answer?</label>
        <input type="radio" name="someRadioGroup" id="radioYes" value="yes" checked="checked"/> Yes
        <input type="radio" name="someRadioGroup" id="radioNo" value="no"/> No
        <input type="radio" name="someRadioGroup" id="radioMaybe" value="maybe"/> Maybe
        <input type="radio" name="someRadioGroup" id="radioConfused" value="confused"/> I dunno
      </div>
      <div><button type="button" id="testButton"class="green90x24">Which?</button></div>
      <div id="result"></div>
    </form>

  </body>
</html>
